import React, { Component } from 'react';

import {
    View,
    Text,
    ScrollView,
    Image,
    ListView,
    TouchableHighlight,
    TouchableOpacity
} from 'react-native';

import Style from './../style/detail.style';

import size from './../common/common.style';

import Swiper from 'react-native-swiper';

let BANNER = [
    {url:require('./../images/slider1.jpg')},
    {url:require('./../images/slider2.jpg')},
    {url:require('./../images/slider3.jpg')},
    {url:require('./../images/slider4.jpg')}
];

class DetailPage extends Component {
    render(){
        return(
            <ScrollView style={Style.wrapperContent}>
                <View style={Style.banners}>
                    <TouchableHighlight style={Style.backUp} onPress={this.backUp.bind(this)}>
                        <Image style={Style.backUpImage} source={require("./../images/back.png")}></Image>
                    </TouchableHighlight>
                    <Swiper showsButtons={false} style={Style.bannersInner}
                            autoplay={true} height={size.$240} paginationStyle={Style.defaultPag} renderPagination={this.renderPagination}>
                        {this.renderSlider(BANNER)}
                    </Swiper>
                </View>
                <View style={Style.title}>
                    <Text style={Style.titleText}>{"客厅餐厅新中式屏风隔断复古简易办公室镂空折屏木质工艺折叠玄关"}</Text>
                    <Text>168元</Text>
                </View>
            </ScrollView>
        )
    }
    renderSlider(banner){
        banner = banner || [];
        let nodes  = banner.map(function (val,index) {
            return(
                <View style={Style.slider} key={index}>
                    <Image style={Style.sliderImage} source={val.url}></Image>
                </View>
            )
        });
        return nodes;
    }
    renderPagination(activeIndex){
        let nodes = BANNER.map(function (val,index) {
            let pagStyle = index == activeIndex ? Style.activePag : Style.defaultPag;
            return( <View style={pagStyle} key={index}></View> );
        });
        return ( <View style={Style.pagContair}>{nodes}</View> );
    }
    backUp(){
        let navigator = this.props.navigator;
        navigator.push({
            index:0
        });
    }
}

export default DetailPage;

